<template>
  <div class="singer-detail">
    <div class="singer-header">
      <image-preview :src="singer.avatarUrl" :width="200" :height="200" class="singer-image" />
      <h1 class="singer-name">{{ singer.singerName }}</h1>
      <p class="singer-description">粉丝数: {{ singer.fans }}0k</p>
    </div>

    <div class="songs-list">
      <h2>相关歌曲</h2>
      <el-table :data="songs" style="width: 100%">
        <el-table-column prop="songName" label="歌曲名" />
        <el-table-column prop="album" label="专辑" />
        <el-table-column prop="playCount" label="播放次数" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-video-play"
              @click="playSong(scope.row)"
            >播放</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "SingerDetail",
  data() {
    return {
      singer: {
        singerName: "歌手名字", // 这里可以从路由参数获取
        avatarUrl: "@/assets/images/singer.jpg", // 替换为实际图片路径
        fans: 100, // 示例数据
      },
      songs: [
        { songName: "歌曲1", album: "专辑1", playCount: 1000 },
        { songName: "歌曲2", album: "专辑2", playCount: 2000 },
        // 添加更多歌曲
      ],
    };
  },
  created() {
    // 从路由参数获取歌手信息
    const singerId = this.$route.query.singerId;
    // 这里可以根据 singerId 从 API 获取歌手的详细信息和相关歌曲
    // 示例：this.fetchSingerDetails(singerId);
  },
  methods: {
    playSong(song) {
      this.$router.push({
        path: "/player",
        query: { songId: song.songId },
      });
    },
  },
};
</script>

<style scoped>
.singer-detail {
  padding: 20px;
  background-color: #f5f5f5;
}

.singer-header {
  text-align: center;
  margin-bottom: 20px;
}

.singer-image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
}

.singer-name {
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0;
}

.singer-description {
  font-size: 16px;
  color: #666;
}

.songs-list {
  margin-top: 20px;
}
</style> 